import { useState } from 'react'
import { View, Image } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { getGoodsDetailApi } from '../../apis/goods'
import './index.scss'

export default function GoodsDetail() {

  const [goodsDetail, setGoodsDetail] = useState({});

  const getGoodsDetail = async (id) => {
    const res = await getGoodsDetailApi(id);
    setGoodsDetail(res.data);
  };

  useLoad(() => {
    getGoodsDetail(1);
     console.log("Page loaded.");
   });

  const { code, images } = goodsDetail

  return (
    <View className='goods-detail'>
        <View className='goods-detail__title'>商品编码: {code}</View>
      <View className='goods-detail__images'>
        {
          images?.map((image, index) => (
            <Image
              mode='widthFix'
              key={index}
              className='goods-detail__images__item'
              src={image}
            />
          ))
        }
      </View>
    </View>
  )
}
